import React from 'react'
import tw from 'twin.macro'
import styled from '@emotion/styled'

const ToggleStyle = styled.div`

  .switch {
    ${tw`relative inline-block align-middle cursor-pointer select-none bg-transparent`}
  }

  .track {
    transition-property: all;
    ${tw`w-12 h-4 bg-gray-600 rounded-full shadow-inner`}
  }

  .thumb {
    ${tw`absolute top-0 w-4 h-4 bg-white border-2 border-gray-600 rounded-full`}
  }

  input[type='checkbox']:checked ~ .thumb {

    --transform-translate-x: 100%;
    --transform-translate-x: 0;
    --transform-translate-y: 0;
    --transform-rotate: 0;
    --transform-skew-x: 0;
    --transform-skew-y: 0;
    --transform-scale-x: 1;
    --transform-scale-y: 1;
    transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));

    ${tw` border-green-500`}
  }

  input[type='checkbox']:checked ~ .track {

      transition-property: background-color, border-color, color, fill, stroke;
      --transform-translate-x: 0;
      --transform-translate-y: 0;
      --transform-rotate: 0;
      --transform-skew-x: 0;
      --transform-skew-y: 0;
      --transform-scale-x: 1;
      --transform-scale-y: 1;
      transform: translateX(var(--transform-translate-x)) translateY(var(--transform-translate-y)) rotate(var(--transform-rotate)) skewX(var(--transform-skew-x)) skewY(var(--transform-skew-y)) scaleX(var(--transform-scale-x)) scaleY(var(--transform-scale-y));

    ${tw`bg-green-500`}
  }

  input[type='checkbox']:disabled ~ .track {
    ${tw`bg-gray-500`}
  }

  input[type='checkbox']:disabled ~ .thumb {
    ${tw`bg-gray-100 border-gray-500`}
  }

  input[type='checkbox']:focus + .track,
  input[type='checkbox']:active + .track {
    ${tw`shadow-outline`}
  }


`

export default function Toggle ({ 
  id,
  text,
  disabled,
  checked,
  onChange
}) {

  //const [checked, setChecked] = React.useState(false)

  function handleChecked (e){
    //setChecked(!checked)
    onChange && onChange(e)
  }

  const checkedClass = checked ? 'left-0' : 'right-0'

  return <ToggleStyle>
    <label htmlFor={id}>
      <div className="switch">
        <input id={id}
          name={id}
          type="checkbox"
          className="sr-only"
          onChange={handleChecked}
          disabled={disabled}
          checked={checked}
        />
        <div className="track"></div>
        <div className={`thumb ${checkedClass} transition-all duration-300 ease-in-out`}></div>
      </div>
      <span className="ml-2 cursor-pointer">
        {text}
      </span>
    </label>
  </ToggleStyle>
}
